<template>
<q-dialog class="add-edit-shift-dialog dialog" v-model="show" persistent>
  <q-card style="min-width: 400px">
    <q-card-section class="dialog-title bg-primary">
      <div class="text-center text-white">{{state==='add'?'添加班制':'编辑班制'}}</div>
    </q-card-section>
    <q-form @submit="submit" class="q-gutter-md dialog-content">
      <q-card-section>
<!--        车间名称-->
        <q-select outlined dense options-dense v-model="workShop"
                  :options="workShopList" :rules="[]" v-if="state==='add'">
          <template v-slot:before>
            <label class="text-right name">车间名称:</label>
          </template>
        </q-select>
        <q-input outlined dense v-model="workShopName" disable :rules="[]" v-else>
          <template v-slot:before>
            <label class="text-right name">车间名称:</label>
          </template>
        </q-input>
<!--        班制名称-->
        <q-input outlined dense v-model="name" :rules="[]">
          <template v-slot:before>
            <label class="text-right name">班制名称:</label>
          </template>
        </q-input>
<!--        开始时间-->
        <q-input outlined dense v-model="startTime" type="time" mask="time" :rules="[]">
          <template v-slot:before>
            <label class="text-right name">开始时间:</label>
          </template>
          <template v-slot:append>
            <q-icon name="iconfont icontubiao-95" size="xs" class="cursor-pointer">
              <q-popup-proxy ref="startTimeProxy">
                <q-time v-model="startTime" mask="HH:mm" format24h />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
<!--        结束时间-->
        <q-input outlined dense v-model="endTime" type="time" mask="time" :rules="[]">
          <template v-slot:before>
            <label class="text-right name">结束时间:</label>
          </template>
          <template v-slot:append>
            <q-icon name="iconfont icontubiao-95" size="xs" class="cursor-pointer">
              <q-popup-proxy ref="endTimeProxy">
                <q-time v-model="endTime" mask="HH:mm" format24h />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
<!--        开始日期-->
        <q-input outlined dense v-model="startDate" mask="####-##-##" :rules="[]">
          <template v-slot:before>
            <label class="text-right name">开始日期:</label>
          </template>
          <template v-slot:append>
            <q-icon name="iconfont icontubiao-94" size="xs" class="cursor-pointer">
              <q-popup-proxy ref="qDateProxy1">
                <q-date v-model="startDate" @input="() => $refs.qDateProxy1.hide()" :locale="dateLocale" />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
<!--        结束日期-->
        <q-input outlined dense v-model="endDate" mask="####-##-##" :rules="[]">
          <template v-slot:before>
            <label class="text-right name">结束日期:</label>
          </template>
          <template v-slot:append>
            <q-icon name="iconfont icontubiao-94" class="cursor-pointer" size="xs">
              <q-popup-proxy ref="qDateProxy2">
                <q-date v-model="endDate" @input="() => $refs.qDateProxy2.hide()" :locale="dateLocale" />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </q-card-section>
      <q-separator />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline label="取消" color="primary" @click="hideDialog" class="q-mr-md"/>
        <q-btn unelevated label="确认" color="primary" type="submit" :loading="submitting"/>
      </div>
    </q-form>
  </q-card>
</q-dialog>
</template>

<script>
import { getWorkshops } from 'src/boot/common/dict'
export default {
  name: 'add-edit-shift-dialog',
  data () {
    return {
      show: false,
      // 分为编辑状态和添加状态 'code-edit' / 'add' / 'child'
      state: 'add',
      workShop: null, // 选中的车间
      workShopList: [], // 车间列表
      workShopName: [], // 车间名字
      name: '', // 班制名称
      startTime: null, // 开始时间
      endTime: null, // 结束时间
      startDate: null, // 开始日期
      endDate: null, // 结束日期
      id: null,
      submitting: false, // 提交状态
      // 日历翻译
      dateLocale: this.CommonConfig.date_locale
    }
  },
  methods: {
    // 显示弹框
    showDialog (state, item, plantId) {
      this.initInfo(state, item, plantId)
      this.show = true
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 初始化数据
    initInfo (state, info, plantId) {
      this.state = state
      if (state === 'add') {
        this.getWorkshopList(plantId)
        this.name = ''
        this.startTime = null
        this.endTime = null
        this.startDate = null
        this.endDate = null
        this.id = null
      } else {
        this.name = info.name
        this.startTime = info.startTime
        this.endTime = info.endTime
        this.startDate = info.startDate
        this.endDate = info.endDate
        this.workShopName = info.workshopName
        this.workShop = {
          label: info.workshopName,
          value: info.workshopId
        }
        this.id = info.id
      }
    },
    // 提交
    submit () {
      const params = {
        name: this.name,
        startTime: this.startTime,
        endTime: this.endTime,
        startDate: this.startDate,
        endDate: this.endDate,
        workshopId: this.workShop.value
      }
      if (this.state === 'edit') {
        params.id = this.id
      }
      this.submitting = true
      this.$emit('submit', this.state, params, this.workShop.label)
    },
    // 获取车间列表
    getWorkshopList (plantId) {
      getWorkshops(plantId).then(res => {
        this.workShopList = res.data
        this.workShop = this.workShopList.length > 0 ? this.workShopList[0] : null
      })
    },
    // 时间切换
    changeStartTime (val) {
      this.startTime = val.split(' ')[1]
      this.$refs.startTimeProxy.hide()
    },
    changeEndTime (val) {
      this.endTime = val.split(' ')[1]
      this.$refs.endTimeProxy.hide()
    }
  }
}
</script>

<style scoped lang="stylus">

</style>
